<template>
    <div class="change-details-box">
        <el-form :model="doctorData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="医生账号" :required="true" size='mini'>
                        <el-input v-model="doctorData.mobile" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="医生姓名" :required="true" size='mini'>
                        <el-input v-model="doctorData.trueName" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                 <el-col :span="12">
                    <el-form-item label="出生日期" :required="true" size='mini'>
                        <el-input v-model="doctorData.birthday" disabled></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="执业日期" :required="true" size='mini'>
                        <el-input v-model="doctorData.workDate" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="行政职称" :required="true" size='mini'>
                        <el-input v-model="doctorData.doctorJobTitle" disabled></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="所属科室" :required="true" size='mini'>
                        <el-input v-model="doctorData.departmentName" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="医生性别" :required="true" size='mini'>
                        <el-radio-group v-model="doctorData.doctorSex" disabled>
                            <el-radio label="1">男</el-radio>
                            <el-radio label="0">女</el-radio>
                            <el-radio label="2">保密</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="擅长" prop="doctorSpecialty" size='mini'>
                        <el-input type="textarea" rows='5' v-model="doctorData.doctorSpecialty"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="简介" prop="doctorSynopsis" size='mini'>
                        <el-input type="textarea" rows='5' v-model="doctorData.doctorSynopsis"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="submit-btn">
            <el-button  @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </div>
    </div>
</template>

<script>
import {deepClone} from '@/utils/index'
export default {
    name:'changeDoctorPesonal',
    props: {
        doctorInfo: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    data () {
        return{
            doctorData: {},
            rules: {
                doctorSpecialty: [
                    { required: true, message: '请填写医生擅长', trigger: 'blur' }
                ],
                doctorSynopsis: [
                    { required: true, message: '请填写医生简介', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.doctorData = deepClone(this.doctorInfo)
    },
    methods: {
        cancel() {
            this.$emit('sent-flag', (this.isChange = false))
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.updateDoctorInfo()
            } else {
                console.log('error submit!!');
                return false;
            }
            });
        },
        updateDoctorInfo() {
            // if (this.doctorData.doctorSpecialty === this.doctorInfo.doctorSpecialty && this.doctorData.doctorSynopsis === this.doctorInfo.doctorSynopsis) {
            //     this.$message({
            //             message: '请修改后再提交',
            //             type: "warning",
            //         });
            //      return   
            // }
            let params = {
                doctorSpecialty: this.doctorData.doctorSpecialty,
                doctorSynopsis: this.doctorData.doctorSynopsis
            }
            this.$ajax.updateDoctorInfo(params).then(res => {
                let {code, msg} = res;
                if (code === 1) {
                    this.$util.message(msg, 'success')
                    this.$emit('sent-flag', (this.isChange = false))
                }
            }).catch(err => {
                this.$util.message(err.msg, 'error')
            });
        }
    }
}
</script>

<style lang="scss">
    .change-details-box {
        /deep/ .el-select {
            width: 100%;
        }
        /deep/ .el-row {
            margin-bottom: 15px;
        }
    }
    .submit-btn {
        text-align: center;
        margin-top: 60px;
    }
</style>